<template>
    <div>
        <a-drawer
            :visible="visible"
            title="图集成片"
            width="800"
            @close="onClose"
        >

            <a-spin tip="加载中..." :spinning="state.spinning">
                <a-checkbox v-model:checked="state.checkedAll" @change="changeCheckd">全选</a-checkbox>
                <div
                    class="file-list"
                    ref="containerRef"
                    :gutter="{ xs: 8, sm: 16, md: 24 }"
                    :wrap="true"
                >
                    <div
                        v-for="(item, index) in state.graphicEditingTaskList"
                        :key="item.id"
                        class="graphic-editing"
                    >
                        <div class="file-item">
                            <div style="width: 100%" class="content_box">
                                <!-- 勾选 -->
                                <a-checkbox class="item_checkbox" :checked="item.checked" @change="checkedMskItem(item)"/>
                                <div class="type-box">
                                    <!-- 未完成总数 大于 成功的数量 (进行中) -->
                                        <span class="schedule"
                                        >图片数量 ({{
                                            item?.medias?.length
                                        }})</span
                                        >
                                    <img
                                    v-lazy="item?.medias?.[0]?.material_url"
                                    class="image"
                                    style="height: 120px; object-fit: contain"
                                    />
                                    <!-- @load="imageLoaded(item)" -->
                                </div>
                                <div class="vidoe_msg_box">
                                    <div class="title">
                                    <a-tooltip>
                                        <template #title>
                                        {{ item.medias?.[0]?.material_name }}
                                        <br>
                                        创建时间:{{ item.created_at }}
                                        <br>
                                        修改时间:{{ item.updated_at }}
                                        </template>
                                        <span class="text_ellipsis">
                                        {{ item.medias?.[0]?.material_name }}
                                        </span>
                                    </a-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mask" @click.stop="checkedMskItem(item)"><eye-outlined class="eye-outlined-bg" @click.stop="showViewFilmRef(item.id, item)"/></div>
                    </div>
                </div>
                <div style="text-align: right">
                  <a-pagination v-model:current="state.page" :pageSize="state.pageSize" :total="state.total"  @change="sizeChange"/>
                </div>
            </a-spin>
            <template #footer>
                <a-row justify="end">
                    <a-col>
                        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
                    </a-col>
                    <a-col>
                        <a-button type="primary" @click="onSubmit">确定</a-button>
                    </a-col>
                </a-row>
            </template>
        </a-drawer>

        <!-- 查看组中的 图片 抽屉 -->
        <viewGraphicImgDrawer ref="viewGraphicImgDrawerRef"></viewGraphicImgDrawer>
    </div>
</template>

<script setup>
import {defineComponent, reactive, watch,ref, computed, onMounted} from "vue";
import request from "@/common/utils/request";
import { EyeOutlined } from '@ant-design/icons-vue';

// 预览组内全部图片的抽屉
import viewGraphicImgDrawer from '../../MaterialCenter/modules/viewGraphicImgDrawer.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  list:{
    type: Array,
    default: ()=>{
      return []
    },
  },
  accountKey:{
    type: String,
    default: ''
  }
});

const emit = defineEmits(["close","submit"]);

const state = reactive({
    graphicEditingTaskList:[],
    total:0,
    page:1,
    pageSize:10,
    checkList:[],
    checkIdList:[],
    spinning:false,
    checkedAll:false
})


// 获取图文成片列表项
const getList = async () => {
  try {
    let params = {
      page: state.page, //当前页码
      pageSize: state.pageSize //当前页数
    }
    state.spinning = true
    const res = await request.get("/work_ai", "/user/image/clip/hight/group/list",params)
     state.graphicEditingTaskList = res.result.data
     state.total = res.result.total

      state.spinning = false
      if(props.list.length>0){
        state.graphicEditingTaskList.forEach((taskItem)=>{
          props.list.forEach((item)=>{
            if(taskItem.id==item.id) {
              taskItem.checked = true
            }
          })
        })
        state.checkList = state.graphicEditingTaskList.filter((item)=>item.checked)
      }
  } catch {
    state.spinning = false
  }
}

watch(
  ()=>state.graphicEditingTaskList,
  (val)=>{
    if(val.length > 0){
      let allChecked = val.every(item => item.checked);
      if (!allChecked) {
          state.checkedAll = false;
      }else{
          state.checkedAll = true;
      }
    }else{
      state.checkedAll = false;
    }
    
  }
)

const sizeChange=(current, size)=>{
    state.page = current
    state.pageSize = size
    getList()
}

const viewGraphicImgDrawerRef=ref()

// 打开预览弹窗
const showViewFilmRef = (id, item) => {
  viewGraphicImgDrawerRef.value?.open({id,item})
}

const checkedMskItem=(checked)=>{

  // if(state.graphicEditingTaskList.length != state.checkList.length){
  //         state.checkedAll = false
  // }
  state.graphicEditingTaskList.forEach((item)=>{
        if(item.id==checked.id){
          item.checked = !item.checked
        }
  })


  if(state.checkIdList.includes(checked.id)){
      let id =state.checkIdList.find((item)=>item == checked.id)
      state.checkIdList = state.checkIdList.filter((item)=>item != id)
      state.checkList = state.checkList.filter((item)=>item.id!=id)

      return
  }

  state.checkList.push(checked)
  state.checkIdList.push(checked.id)
  if(state.graphicEditingTaskList.length == state.checkList.length){
    state.checkedAll = true
  }
}

const onClose=()=>{
    emit('close')
}

const onSubmit=()=>{
    let checkList = state.checkList.filter((item)=>item.checked)
    emit('submit',{checkList,accountKey:props.accountKey})
}

const changeCheckd=({target})=>{
  if(target.checked){
    state.graphicEditingTaskList.forEach((item)=>{
      state.checkList.push(item)
      state.checkIdList.push(item.id)
      state.checkList.forEach((checkList)=>{
        checkList.checked = true
      })
    })
  }else{
    state.graphicEditingTaskList.forEach((item)=>{
      item.checked = false
      if(!item.checked){
        state.checkList = state.checkList.filter((i)=>i.checked)
      }
    })
  }
}

watch(
    ()=>props.visible,
    (val)=>{
        if(val){
            state.page = 1
            state.pageSize = 10
            getList()
        }else {
          if(!props.list.length){
            state.graphicEditingTaskList.forEach((item)=>{
              item.checked = false
            })
            state.checkList = []
            state.checkIdList = []
          }
          state.checkedAll = false
        }
    }
)

</script>

<style lang="less" scoped>
.file-list {
        // margin-top: 20px;
        display: grid;
        // justify-content: space-between;
        // gap: 20px;
        // flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
        overflow: auto;
        margin-top: 10px;

        .graphic-editing{
          position: relative;
          width: 204px; 
          cursor: pointer;
          margin-bottom: 15px;
            .file-item {
            // background-color: #fff;
            border-radius: 7px;
            overflow: hidden;
            margin-right: 10px;
            // margin-bottom: 35px;
            // padding: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            cursor: pointer;

          .item_checkbox{
                position: absolute;
                left: 5px;
                top: 5px;
                z-index: 1;
              }

            .use_release {
              color: #0076ff;
              background: #d0d0d0;
              border-radius: 5px;
              padding: 2px 4px;
              font-weight: 500;
            }

            .badge {
              position: absolute;
              top: 28px;
              right: 25px;
              background: rgba(0, 0, 0, 0.2);
              border-radius: 50%;
              color: #fff;
            }

            .icon-postion {
              position: absolute;
              top: 48px;
              left: 50px;
              font-size: 22px;
              cursor: pointer;
            }

            .image-box {
              margin-top: 40px;
              width: 100%;
              text-align: center;

              .image {
                width: 70px;
                height: 70px;
                border-radius: 4px;
                margin: 0 auto;
                position: relative;

                .image-mask {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 70px;
                  height: 70px;
                  border-radius: 4px;
                  background: rgba(0, 0, 0, 0.1);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  opacity: 0;
                  color: #fff;

                  .icon-eye-filled {
                    font-size: 24px;

                    &:hover {
                      color: #2878ff;
                    }
                  }
                }

                &:hover {
                  .image-mask {
                    opacity: 1;
                  }
                }

                .durationText {
                  position: absolute;
                  left: 2px;
                  bottom: 0px;
                  color: #fff;
                }
              }

              .image-name {
                padding: 0 6px;
                height: 50px;
                padding-top: 5px;
                word-wrap: break-word;
              }

              .image-time {
                font-size: 12px;
                color: #9ea4aa;
              }
            }

            .content_box {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              // 描述容器
              .vidoe_msg_box {
                // height: 60px;
                // padding: 12px 12px;
                // height: 100%;

                .title {
                  text-align: left;
                  font-weight: 700;
                  margin-top: 5px;
                  display: flex;
                  justify-content: space-between;
                  position: relative;

                  .text_ellipsis {
                    display: inline-block;
                    // max-width: 200px; /* 设置最大宽度，根据需要调整 */
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    /* 根据需要调整 */
                  }

                  .ellipsisOutlined {
                    margin-left: 5px;
                  }

                  .ipt {
                    .confirm {
                      &:hover {
                        color: #2878ff;
                      }
                    }

                    .cancel {
                      &:hover {
                        color: #0076ff;
                      }
                    }
                  }
                }
              }

              .type-box {
                width: 100%;
                height: 120px;
                position: relative;
                background-color: #000;
                border-radius: 8px;

                :deep(.ss-spin-nested-loading > div > .ss-spin .ss-spin-text) {
                  text-shadow: none;
                }

                .schedule {
                  position: absolute;
                  right: 0;
                  top: 0;
                  z-index: 10;
                  // background-color: #f3c548;
                  background-color: #239842;
                  color: #fff;
                  font-size: 11px;
                  padding: 2px 8px;
                  border-radius: 0 0 0 8px;
                }

                .loding_item {
                  // height: 100%;
                  height: 120px;
                  width: 100%;
                  background-color: #dadada;
                  align-items: center;
                  padding: 15px;
                  position: relative;
                  overflow: hidden;
                  cursor: pointer;
                  border-radius: 5px;
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  gap: 10px;

                  .loding_progress {
                    width: 100%;
                  }

                  .loding_text {
                    font-weight: 600;
                  }

                  .loding_dec {
                    .loding_dec_text {
                      color: #9b9b9b;
                      margin-left: 5px;
                    }
                  }
                }

                .text-box {
                  width: 100%;
                  height: 100%;

                  color: #fff;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 5px;
                  padding: 20px;

                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: relative;

                  .text {
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }

                .image {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 8px;
                }

                .video-box {
                  width: 100%;
                  height: 120px;
                  border-radius: 8px;
                }

                .duration {
                  position: absolute;
                  bottom: 5px;
                  right: 8px;
                  padding: 0 5px;
                  border-radius: 5px;
                  background: rgba(0, 0, 0, 0.3);
                  color: #fff;
                }

                .status {
                  position: absolute;
                  bottom: 5px;
                  left: 8px;
                  padding: 0 5px;
                  border-radius: 5px;
                  // background: rgba(0, 0, 0, 0.3);
                  color: #fff;
                }

                .status_active {
                  &:hover {
                    color: var(--ss-primary-color);
                  }
                }

                .audio-box {
                  height: 100%;
                  color: #fff;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 8px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
      
          }
          .mask{
              position: absolute;
              top: 0;
              left: 0;
              width: 194px;
              height: 120px;
              background: rgba(0, 0, 0, 0.4);
              justify-content: center;
              align-items: center;
              font-size: 26px;
              color: #fff;
              display: none;
              border-radius: 8px;
              .eye-outlined-bg{
                  &:hover{
                  color: #1858d9;
                }
              }
          }
          &:hover{
            .mask {
              display: flex;
            }
          }
        }

       
  
}
</style>